import { Button, Form, Input } from "antd";
import { useTranslation } from "react-i18next";
import "../index.less";
import { useNavigate } from "react-router-dom";
import { HOME_URL } from "@/config/config";

import {
  UserOutlined,
  LockOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons";
import { useSelector } from "react-redux";

const LoginForm = (props: any) => {
  const theme = useSelector((state: any) => state.global.theme);
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const onFinish = () => {
    navigate(HOME_URL);
  };
  return (
    <Form
      form={form}
      name='basic'
      labelCol={{ span: 5 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      size='large'
      autoComplete='off'
    >
      <Form.Item
        name='username'
        rules={[{ required: true, message: "请输入用户名" }]}
      >
        <Input placeholder='用户名：admin / user' prefix={<UserOutlined />} />
      </Form.Item>
      <Form.Item
        name='password'
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Input.Password
          autoComplete='new-password'
          placeholder='密码：123456'
          prefix={<LockOutlined />}
        />
      </Form.Item>
      <Form.Item className='login-btn'>
        <Button
          onClick={() => {
            form.resetFields();
          }}
          icon={<CloseCircleOutlined />}
        >
          {t("login.reset")}
        </Button>
        <Button type='primary' htmlType='submit' icon={<UserOutlined />}>
          {t("login.confirm")}
        </Button>
      </Form.Item>
    </Form>
  );
};

export default LoginForm;
